<template>
  <div class="content_box">
    <div class="dh_list" v-if="userCouponList.length">
      <div class="list" v-for="(item,index) in userCouponList" :key="index">
        <div class="box">
          <p class="img">
            <van-image
                width="100%"
                height="100%"
                fit="cover"
                widthFix
                lazy-load
                :src="item.cardImg?item.cardImg[0]:''"
              />
          </p>
          <div class="right">
            <div class="msg">
              <p class="name">{{item.name}}</p>
              <p class="text1">兑换时长：<span>{{item.hours}}小时</span></p>
              <p class="text1" v-if="item.status == 0">请于 <span>{{item.expireTime}}</span> 前使用</p>
              <p class="text1" v-if="item.status == 1">已于 <span>{{item.expireTime}}</span> 前使用</p>
              <p class="text1" v-if="item.status == 2">已于 <span>{{item.expireTime}}</span> 前过期</p>
              <!-- <p class="text1" @click="zhankai(item,index)">详细信息<van-icon name="arrow-down" style="margin-left:4rpx;"/></p> -->
            </div>
            <p class="anniu" v-if="item.status == 0" @click="toRoom(item)">立即使用</p>
          </div>
          <img v-if="item.status == 1" src="/static/images/ysy.png" alt="">
          <img v-if="item.status == 2" src="/static/images/ysy.png" alt="">
        </div>
        <div class="text_text" v-if="item.isClick">
          <p>1.通过库底咖啡西夏程序app下单</p>
          <p>1.通过库底咖啡西夏程序app下单</p>
        </div>
      </div>
    </div>
    <div class="no_data" v-else>
     <img mode="widthFix" src="/static/images/components/no_order.png" alt="" />
      <!-- <p class="text"></p> -->
   </div>
  </div>
</template>

<script>
import { 
  getToken,
  getUserPhone
} from "@/utils/auth";
import { Debounce } from "@/utils"
import { 
  getUserCardCouponPage,
  getCardCouponRoom
} from "@/api/index";
export default {
  data() {
    return {
      param:{
        current:1,
        size:10,
      },
      userCouponList:[],
    };
  },
  methods: {

    // 用户领取的卡券
    getUserCouponList(state){
      getUserCardCouponPage(this.param).then(res=>{
        if(res.statusCode == '00000'){
          if(this.param.current != 1 && !res.data.records.length){
            wx.showToast({
              title: '已经到底了~',
              icon: 'none',
              duration: 1500
            })
            return
          }
          if(state){
            this.userCouponList = []
          }
          res.data.records.map(item=>{
            item.isClick = false
          })
          this.userCouponList = res.data.records
          wx.hideLoading()
          wx.hideNavigationBarLoading();
          wx.stopPullDownRefresh();
        }else{
          wx.hideLoading()
          wx.hideNavigationBarLoading();
          wx.stopPullDownRefresh();
        }
      })
    },

    //展开收缩
    zhankai(item,index){
      console.log(item,index)
      if(!item.isClick){
        this.userCouponList[index].isClick = true
      }else{
        this.userCouponList[index].isClick = false
      }
    },

    // 跳转房间列表
    toRoom:Debounce(function (item) {
      this.$showLoading('加载中...')
      getCardCouponRoom({cardCouponId:item.cardCouponId}).then(res=>{
        if(res.statusCode == '00000'){
          setTimeout(() => {
            wx.hideLoading()
            wx.navigateTo({
              url: `/pages/mt/main?info=${JSON.stringify(res.data)}&state=1&cardCouponId=${item.cardCouponId}`,
            });
            this.loading = false
          }, 1000);
          
        }else{
          wx.hideLoading()
          this.loading = false
          this.$toast(res.message)
        }
      })
    },300),
  },
  onShow(){

  },
  onLoad(options) {
    this.getUserCouponList(true)
  },
  // 上拉加载
  onReachBottom(){
    console.log('到底了')
    this.param.current += 1
    this.getUserCouponList()
  },
  // 下拉刷新
  onPullDownRefresh(){
    //在当前页面显示导航条加载动画
    wx.showNavigationBarLoading();
    this.param.current = 1
    this.param.size = 10
    this.getUserCouponList(true)
  },
};
</script>

<style lang="scss" scoped>
.content_box{
  background: #f5f5f5;
  min-height: 100vh;
  padding:1rpx 0;
  .dh_list{
    margin:24rpx 30rpx;
    .list{
      background: #fff;
      padding:24rpx;
      border-radius: 8rpx;
      box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(30,53,88,0.02);
    }
    .title_box{
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 30rpx;
      font-weight: 500;
      color: #111111;
      padding:24rpx 0 30rpx 0;
      .line{
        width: 6rpx;
        height: 30rpx;
        background: #00C200;
        border-radius: 4rpx;
        margin-right:16rpx;
      }
      div{
        display: flex;
        align-items: center;
      }
      .more{
        font-size:24rpx;
        color:#333;
      }
      
    }
    .list{
      position: relative;
      margin-bottom:26rpx;
      .text_text{
        font-size:20rpx;
        color:#999999;
        padding:20rpx 10rpx;
      }
      .box{
        display: flex;
      }
      &:last-child{
        margin-bottom:0;
      }
      .right{
        flex: 1;
        display: flex;
        justify-content: space-between;
      }
      .img{
        width: 180rpx;
        height: 180rpx;
        background: #aaa;
        border-radius: 10rpx;
      }
      .msg{
        margin-left:16rpx;
        .name{
          font-weight: 500;
          font-size: 30rpx;
          color: #111111;
          margin-bottom:24rpx;
        }
        .text1{
          font-size: 22rpx;
          color: #999999;
          margin-top:14rpx;
          span{
            color: #111111;
          }
        }
      }
      .anniu{
        width: 122rpx;
        height: 46rpx;
        line-height: 46rpx;
        text-align: center;
        border:1px solid #aaa;
        color:#FF6600;
        font-size:22rpx;
        border:1px solid #FF6600;
        border-radius: 8rpx;
        margin-top:60rpx;
      }
      img{
        width: 148rpx;
        height: 144rpx;
        position: absolute;
        right:20rpx;
        top:20rpx;
      }
    }
  }
  .no_data{
   text-align: center;
   font-size:28rpx;
   color:#333;
   padding-top:150rpx;
   .text{
     font-weight: bold;
     color:#999;
   }
   img{
     width: 248rpx;
     margin-bottom:10rpx;
   }
   .button{
     width: 240rpx;
     height: 70rpx;
     line-height: 70rpx;
      background: #02b4ae;
     // background: #35c982;
     border-radius: 120rpx;
     text-align: center;
     font-size: 30rpx;
     color: #fff;
     margin-top: 30rpx;
     margin: 30rpx auto 0 auto;
   }
 }
}
</style>